<template>
	<scroll-view scroll-x="true" scroll-y="true">
		<!-- table -->
		<view class="table-wrapper">
				<view ref="table" class="my-table mb10">
					<!-- 顶部冻结，左侧冻结 -->
					<view class="left-table" v-if="tableHeadFrozen && leftFrozenColumns.length>0" id="leftTable">
						<thead id="leftTableHead" class="table-head table-head-fixed">
							<tr>
								<td v-for="(leftFrozenColumn, index) in leftFrozenColumns" :key="index">
									<view class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''">{{leftFrozenColumn.name}}</view>
								</td>
							</tr>
						</thead>
						<tbody class="table-body table-body-fixed" :style="'margin-top:' + headerHeight + 'px;'" v-if="tableData.length > 0">
							<tr v-for="(row,index) in tableData" :key="index">
								<td v-for="(leftFrozenColumn, columnIndex) in leftFrozenColumns" :key="columnIndex">
									<view v-if="!leftFrozenColumn.type || leftFrozenColumn.type!=='html'" 
										class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''">{{row[leftFrozenColumn.key]}}</view>
									<view v-if="leftFrozenColumn.type=='html'" 
										class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''" v-html="row[leftFrozenColumn.key]"></view>
								</td>
							</tr>
						</tbody>
					</view>
					
					<view v-if="tableHeadFrozen && leftFrozenColumns.length>0" class="center-table" style="overflow: hidden;" id="centerTable">
						<thead id="centerTableHead" ref="centerTableHead" class="table-head table-head-fixed"
							:style="'left:' +  ( leftTableWidth - movedViewX) + 'px;'"
							@mousemove="scroll"
							@touchstart="moveStart" @touchend="moveEnd" >
							<tr>
								<td v-for="(header,index) in actualTableHead" :key="index">
									<view class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{header.name}}</view>
								</td>
							</tr>
						</thead>
						
						<tbody ref="centerTableBody" class="table-body table-body-fixed" v-if="tableData.length > 0"
							:style="'margin-left:' + (- movedViewX) + 'px;margin-top:' + headerHeight + 'px;'"
							@mousemove="scroll"
							@touchstart="moveStart" @touchend="moveEnd" >  
							<tr v-for="(row,index) in tableData" :key="index">
								<!-- <td class="table-center-float" v-for="(item3,index3) in tableHead" :key="index3"> -->
								<!-- <td class="table-center-float" v-for="(item3,index3) in tableHead" :key="index3">
									<view class="my-td-p " v-if='item3.key ==="id"'>{{row[item3.key]}}</view>
									<view class="my-td-p " v-else-if='item3.key === "operator"'>{{row[item3.key]}}</view>
									<view class="my-td-p " v-else-if='item3.key === "modifyTime"'>{{row[item3.key]}}</view>
									<view class="my-td-p " v-else>{{row[item3.key]}}</view>
								</td> -->
								<td v-for="(header,index3) in actualTableHead" :key="index3">
									<view v-if="!header.type || header.type!=='html'" class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{row[header.key]}}</view>
									<view v-if="header.type ==='html' " class="my-td-p" :style="header.width?'width:' + header.width + 'px':''" v-html="row[header.key]"></view>
								</td>
							</tr>
						</tbody>
					</view>
					
					<!-- 顶部冻结，左侧不冻结 -->
					<view v-if="tableHeadFrozen && leftFrozenColumns.length==0" class="center-table" style="overflow: hidden;">
						<thead id="centerTableHead" ref="centerTableHead" class="table-head table-head-fixed">
							<tr>
								<td v-for="(header,index) in actualTableHead" :key="index">
									<view class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{header.name}}</view>
								</td>
							</tr>
						</thead>
						
						<tbody :style="'margin-top:' + headerHeight + 'px;'" ref="centerTableBody" class="table-body table-body-fixed" v-if="tableData.length > 0" >
							<tr v-for="(row,index) in tableData" :key="index">
								<td v-for="(header,index3) in actualTableHead" :key="index3">
									<view v-if="!header.type || header.type!=='html'" class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{row[header.key]}}</view>
									<view v-if="header.type ==='html' " class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''" v-html="row[header.key]"></view>
								</td>
							</tr>
						</tbody>
					</view>
					
					<!-- 顶部不冻结，左侧冻结 -->
					<view class="left-table" v-if="!tableHeadFrozen && leftFrozenColumns.length>0">
						<thead id="leftTableHead" class="table-head">
							<tr>
								<td v-for="(leftFrozenColumn, index) in leftFrozenColumns" :key="index">
									<view class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''">{{leftFrozenColumn.name}}</view>
								</td>
							</tr>
						</thead>
						<tbody class="table-body" v-if="tableData.length > 0">
							<tr v-for="(row,index) in tableData" :key="index">
								<td v-for="(leftFrozenColumn, columnIndex) in leftFrozenColumns" :key="columnIndex">
									<view v-if="!leftFrozenColumn.type || leftFrozenColumn.type!=='html'" 
										class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''">{{row[leftFrozenColumn.key]}}</view>
									<view v-if="leftFrozenColumn.type=='html'" 
										class="my-td-p" :style="leftFrozenColumn.width?'width:' + leftFrozenColumn.width + 'px;':''" v-html="row[leftFrozenColumn.key]"></view>
								</td>
							</tr>
						</tbody>
					</view>
					
					<view v-if="!tableHeadFrozen" class="center-table">
						<thead id="centerTableHead" ref="centerTableHead" class="table-head">
							<tr>
								<td v-for="(header,index) in actualTableHead" :key="index">
									<view class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{header.name}}</view>
								</td>
							</tr>
						</thead>
						
						<tbody ref="centerTableBody" class="table-body table-body-fixed" v-if="tableData.length > 0">
							<tr v-for="(row,index) in tableData" :key="index">
								<td v-for="(header,index3) in actualTableHead" :key="index3">
									<view v-if="!header.type || header.type!=='html'" class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''">{{row[header.key]}}</view>
									<view v-if="header.type ==='html' " class="my-td-p" :style="header.width?'width:' + header.width + 'px;':''" v-html="row[header.key]"></view>
								</td>
							</tr>
						</tbody>
					</view>
					
				</view>
			</view>
		</scroll-view>
</template>

<script>
	export default {
		name: "gzyTopLeftFixableTable",
		props: {
			tableHead: {
				type: Array,
				default: () => []
			},
			tableList: {
				type: Array,
				default: () => []
			},
			leftFrozenColumns: {
				type: Array,
				default: () => []
			},
			tableHeadFrozen: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tableLoading: false,
				preViewX: 0,
				movedViewX: 0,
				leftTableWidth: 0,
				centerTableWidth: 0,
				headerHeight: 0,
				maxScrollWidth: 0,
				tableData: this.tableList
			}
		},
		mounted() {
			var selector = uni.createSelectorQuery().in(this)
			if (this.tableHeadFrozen && this.leftFrozenColumns.length>0) {
				selector.select('#centerTableHead').boundingClientRect()
				selector.select('#leftTableHead').boundingClientRect()
				selector.exec(rects => {
					this.centerTableWidth = rects[0].width
					this.leftTableWidth = rects[1].width
					this.headerHeight = rects[0].height
					console.log(this.centerTableWidth, this.leftTableWidth)
					this.maxScrollWidth = this. centerTableWidth + this.leftTableWidth - uni.getSystemInfoSync().windowWidth
					// this.leftTableWidth = 0
				})
			} else if (this.tableHeadFrozen) {
				selector.select('#centerTableHead').boundingClientRect()
				selector.exec(rects => {
					this.headerHeight = rects[0].height
				})
			}
			window.addEventListener('resize',this.listenResize, true); 
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.listenResize, true)
		},
		computed: {
			actualTableHead() {
				if (!this.tableHead|| this.tableHead.length == 0) {
					return []
				}
				if (!this.leftFrozenColumns || this.leftFrozenColumns.length == 0) {
					return this.tableHead
				}
				var leftFrozenColumnKeys = this.leftFrozenColumns.map(item => item.key)
				return this.tableHead.filter(item => !leftFrozenColumnKeys.includes(item.key))
			}
		},
		watch: {
			tableList() {
				console.log('enter')
				this.tableData = this.tableList
			}
		},
		methods: {
			listenResize(data) {
				this.maxScrollWidth = this. centerTableWidth + this.leftTableWidth - uni.getSystemInfoSync().windowWidth
				this.movedViewX = 0
			},
			scroll(event) {
				if (this.maxScrollWidth <= 0) {
					return
				}
				var newX = event.clientX
				// if (newX < this.leftTableWidth || newX > this.leftTableWidth + this.centerTableWidth) {
				// 	return
				// }
				var calcX = this.movedViewX + this.preViewX - newX
				// console.log(calcX, this.movedViewX, this.preViewX, newX)
				if(calcX <= 0) {
					this.movedViewX = 0
				} else if(calcX > this.maxScrollWidth) {
					this.movedViewX = this.maxScrollWidth
				} else {
					this.movedViewX +=  this.preViewX - newX
				}
				this.preViewX = newX
			},
			moveStart(event) {
				if (this.maxScrollWidth <= 0) {
					return
				}
				this.preViewX = event.changedTouches[0].pageX
			},
			moveEnd(event) {
				if (this.maxScrollWidth <= 0) {
					return
				}
				var newX = event.changedTouches[0].pageX
				var calcX = this.movedViewX + this.preViewX - newX
				if(calcX <= 0) {
					this.movedViewX = 0
				} else if(calcX > this.maxScrollWidth) {
					this.movedViewX = this.maxScrollWidth
				} else {
					this.movedViewX +=  this.preViewX - newX
				}
				// console.log(this.movedViewX, calcX)
				// this.preViewX = newX
			}
		}
	}
</script>

<style scoped>
	/** table通用样式 **/
	
	table::-webkit-scrollbar { /* 去掉表格的重复边框 */
		display: none;
	}

	th, td {
		border: 2rpx solid #dedede;
		border-style: inset;
	}
	
	._tr {
		display: flex;
	}
	
	.table-wrapper {
		/* margin-bottom: 10px; */
		/* padding: 0 10rpx; */
		/* overflow: scroll; */
	}
	
	/* 表头 */
	.table-head {
		text-align: center;
		white-space: nowrap;
		background-color: white;
		/* height: 29px;
		line-height: 19px; */
		vertical-align: middle;
		color: black;
		/* border-bottom: 2rpx solid #444444; */
	}
	
	.table-body {
		/* overflow: scroll; */
	}
	
	.my-table {
		border-collapse: collapse;
		border-spacing: 0;
		position: relative;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		
		z-index: 3;
	}
	
	.left-table td, .table-head td {
		background-color: #fff;
		border: 2rpx solid #444444;
		border-style: inset;
	}
	
	.my-td-p {
		text-align: center;
		color: #5c5858;
		font-weight: 400;
		font-size: 15px;
		
		display: inline-block;
		/* line-height: 40rpx; */
		height: 24px;
		line-height: 24px;
		padding: 4rpx 4rpx;
		margin: auto 0;
		vertical-align: middle;
		overflow: hidden;
		/* overflow-x: scroll; */
		min-width: 80rpx;
		
		word-break: keep-all;
		white-space: nowrap;
	}
	
	.table-head-fixed {
		position: fixed;
		/* overflow: scroll; */
	}
	
	/** 左右table样式  **/
	
	.left-table {
		z-index: 3;
		background-color: #fff;
		position: relative;
		    /* width: 100%; */
		/* position: absolute; */
		/* left: 250px; */
		float: left;
		display: flex;
		flex-direction: column;
	}
	
	.left-table .table-head-fixed {
		z-index: 4;
	}
	
	.center-table {
		z-index: 1;
		background-color: #fff;
		/* position: relative; */
		
		float: left;
		width: 100%;
		overflow: scroll;
		
		display: flex;
		flex-direction: column;
	}
	
	.center-table .table-head-fixed {
		z-index: 2;
	}
</style>

<!-- 本页⾯⽤到个⼈ common公共样式 -->
<style scoped>
	.mb10 {
		margin-bottom: 20rpx;
	}
</style>
